import { Div, H3, H4, H6, Header, Li, P, Section, Ul } from "@/components/skui"
import { Text } from "@rneui/base"
import { Icon, Image, ListItem, Input } from "@rneui/themed"
import { Link } from "expo-router"
import React, { useEffect } from 'react'
import { ActivityIndicator, ScrollView, StyleSheet, View, TouchableOpacity } from "react-native"
import { SafeAreaView } from "react-native-safe-area-context"
function mine() {
    return (
        <SafeAreaView style={{ backgroundColor: "#f1f1f1", flex: 1 }}>
            <ScrollView>
                {/* <Section style={{ backgroundColor: "red" }}>
                    <H3 style={{ backgroundColor: "yellow" }}>这个顶部功能区域，主要放一下ICon</H3>
                </Section> */}
                <Header style={{ padding: 8, backgroundColor: "#fff" }}>
                    <View style={{
                        width: 120, height: 160,
                        // backgroundColor: "red"
                        borderRadius: "5%",
                        backgroundColor: "#C7EDCC"
                    }}>
                        <TouchableOpacity activeOpacity={0.6}>
                            <Image
                                style={{ width: "100%", height: "100%" }}
                                source={require("@/assets/images/Avatar.png")}
                            />
                        </TouchableOpacity>
                    </View>
                    <Ul style={{ flex: 1 }}>
                        <Li>
                            <ScrollView horizontal showsHorizontalScrollIndicator={false}>
                                <Text>许家印 （IP属地：广东    37岁）</Text>
                            </ScrollView>
                        </Li>
                        <Li>
                            <ScrollView horizontal showsHorizontalScrollIndicator={false}>
                                <Text>家乡：黑龙江省宝清县</Text>
                            </ScrollView>

                        </Li>
                        <Li>
                            <ScrollView horizontal showsHorizontalScrollIndicator={false}>
                                <Text>学校：黑龙江科技大学  宝清县第一高中  宝清县第二中学</Text>
                            </ScrollView>
                        </Li>
                        <Li>
                            <ScrollView horizontal showsHorizontalScrollIndicator={false}>
                                <Text>公司：东软集团  神州数码  工大博实</Text>
                            </ScrollView></Li>
                        <Li>
                            <ScrollView horizontal showsHorizontalScrollIndicator={false}>
                                <Text>关注：366   粉丝：159   获赞：7016</Text>
                            </ScrollView>
                        </Li>
                        <Li>
                            <ScrollView horizontal showsHorizontalScrollIndicator={false}>
                                {/* <Image
                                    style={{ width: 28, height: 28 }}
                                    source={require("@/assets/images/visitor.png")}
                                /> */}
                                <Text style={{ position: "relative", top: 6 }}>访客：</Text>
                                <View style={{ flexDirection: "row" }}>
                                    {
                                        Array.from({ length: 10 }).map((item, index) => {
                                            return (
                                                <TouchableOpacity activeOpacity={0.6} key={index}>
                                                    <Image
                                                        style={{ width: 27, height: 27, margin: 2, marginRight: 12 }}
                                                        source={require("@/assets/images/Avatar.png")}
                                                    />
                                                </TouchableOpacity>
                                            )
                                        })
                                    }
                                </View>
                            </ScrollView>
                        </Li>
                    </Ul>
                </Header>
                <Link href="../login">登录</Link>
                <TouchableOpacity activeOpacity={0.6} style={{ marginTop: 12 }}>
                    <ListItem bottomDivider>
                        <Icon name="inbox" type="material-community" color="grey" />
                        <ListItem.Content>
                            <ListItem.Title>朋友圈</ListItem.Title>
                        </ListItem.Content>
                        <ListItem.Chevron />
                    </ListItem>
                </TouchableOpacity>
                <TouchableOpacity activeOpacity={0.6}>
                    <ListItem>
                        <Icon name="setting" type="antdesign" color="grey" />
                        <ListItem.Content>
                            <ListItem.Title>设置</ListItem.Title>
                        </ListItem.Content>
                        <ListItem.Chevron />
                    </ListItem>
                </TouchableOpacity>
            </ScrollView>
        </SafeAreaView>
    )
}

const styles = StyleSheet.create({
});

export default mine